<template>
    <el-row>
        <el-card>
            <el-row class="form-row">
                <el-form :model="filters" label-position="right" inline ref="formInline">
                    <el-form-item label="主题">
                        <div class="filters-input">
                            <el-input v-model="filters.theme" placeholder="主题" clearable/>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row class="form-row">
                <el-button type="primary" icon="md-add" @click="handleAdd()" style="margin-right: 10px;">新建
                </el-button>
            </el-row>
            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="theme" label="新闻主题"></el-table-column>
                <el-table-column prop="themeImg" label="标题图片">
                    <template slot-scope="scope">
                        <span style="width: 30px;height: 40px; margin: 5px" v-for="u in scope.row.themeImgUrl"
                              @click="HandleImg(u)">
                            <img :src="u" style="width: 30px;">
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="发布人"></el-table-column>
                <el-table-column label="发布状态">
                    <template slot-scope="scope">
                        <p v-if="scope.row.status == false" style="color:red">未发布</p>
                        <p v-if="scope.row.status == true" style="color:green">已发布</p>
                    </template>
                </el-table-column>
                <el-table-column prop="releaseTime" label="发布时间"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-dropdown>
                            <el-button type="primary">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown" align="center">
                                <el-dropdown-item @click.native="handleInfo(scope.row.id)">预览</el-dropdown-item>
                                <el-dropdown-item @click.native="releaseNews(scope.row.id)">发布</el-dropdown-item>
                                <el-dropdown-item @click.native="handleAdd(scope.row)">修改</el-dropdown-item>
                                <el-dropdown-item @click.native="deleteNews(scope.row.id)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </el-card>

        <!--<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :mask-closable="false">
            <div id="qrcode" ref="qrcode"></div>
            <div slot="footer">
                <el-button type="primary" size="large" @click="dialogVisible = false">确定</el-button>
            </div>
        </el-dialog>-->

        <Modal v-model="dialogVisible" title="预览" class="modal-content" width="350" :mask-closable="false">
            <div id="qrcode"></div>
            <span style="text-align: center;display: block;margin-top: 20px;color: red">
                请使用钉钉扫一扫预览新闻
            </span>
            <div slot="footer">
                <el-button type="primary" size="large" @click="dialogVisible = false">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="newdialogVisible" title="新建" class="modal-content" width="60%" :mask-closable="false">
            <template>
                <div class="ly-content">
                    <div class="ly-center">
                        <Card>

                            <div class="ly-item">
                                <div class="left"><span>*</span>标题</div>
                                <div class="right">
                                    <el-input
                                        style="width: 360px"
                                        placeholder="请输入内容"
                                        v-model="news.theme"
                                        clearable>
                                    </el-input>
                                </div>
                            </div>

                            <div class="ly-item">
                                <div class="left"><span>*</span> 摘要</div>
                                <div class="right">
                                    <el-input
                                        style="width: 360px"
                                        type="textarea"
                                        placeholder="请输入内容"
                                        v-model="news.synopsis"
                                        clearable>
                                    </el-input>
                                </div>
                            </div>

                            <div class="ly-item">
                                <div class="left">缩略图</div>
                                <div class="right">
                                    <el-upload
                                        class="avatar-uploader"
                                        accept="image/jpeg,image/jpg,image/png"
                                        :action="act"
                                        :data="fileName"
                                        :show-file-list="false"
                                        :headers="{'x-access-token':token}"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                        <img v-if="imageUrl" v-bind:src="imageUrl" class="ly-avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                                <div class="ly-tips">610px*180px</div>
                            </div>
                            <div class="edit_container">
                                <!--  新增时输入 -->
                                <quill-editor
                                    v-model="news.newsContent"
                                    ref="myQuillEditor"
                                    :options="editorOption"
                                    @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                                    @change="onEditorChange($event)">
                                </quill-editor>
                            </div>
                        </Card>
                    </div>
                </div>
            </template>
            <div slot="footer">
                <el-button size="large" @click="newdialogVisible = false">取消</el-button>
                <el-button type="primary" size="large" @click="handleUp">保存</el-button>
            </div>
        </Modal>

    </el-row>
</template>


<script>
    import QRCode from 'qrcodejs2'
    import {quillEditor} from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';

    import baseURL from '_conf/url'
    import Cookies from 'js-cookie'

    import {TOKEN_KEY} from '@/libs/util'
    const token = Cookies.get(TOKEN_KEY)
    const act = baseURL + "/common/uploadImg"


    export default {
        components: {
            quillEditor
        },
        data() {
            return {
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                tableData: [],
                tableLoading: false,
                //发布新闻公告
                str: '',
                dialogVisible: false,
                token: token,
                str: '',
                editorOption: {
                    placeholder: "发布内容"
                },
                news: {},
                act: act,
                imageUrl: '',
                newdialogVisible: false,
                fileName: {fileName: "news-img/"},
            }
        },
        created: function () {
            this.loadData();
        },
        mounted() {
            this.qrcode();
        },
        methods: {
            //加载数据
            loadData: function () {
                if (this.tableLoading) return;
                this.tableLoading = true;
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/newsPlacard/loadData", params).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        console.log(res.data.list);
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },

            //查询
            handleQuery() {
                this.loadData();
            },

            //预览新闻内容
            handleInfo(id) {
                //拉取登录人公司钉钉id
                this.getRequest("/api/dingTalk/getCorpId").then(res => {
                    if (res.code == 20000) {
                        this.dialogVisible = true;
                        this.qrcode(res.data.dingTalkCorpId,id);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            qrcode(corpId,id) {
                document.getElementById('qrcode').innerHTML = '';
                let qrcode = new QRCode('qrcode', {
                    width: 300, // 设置宽度，单位像素
                    height: 300, // 设置高度，单位像素
                    text: "http://m.housekeeper.siyueluo.com/news/info?corpid="+corpId+"&id=" + id   // 设置二维码内容或跳转地址
                })
            },
            //发布新闻公告
            releaseNews(id) {
                this.getRequest("/api/newsPlacard/releaseNews?id=" + id).then(res => {
                    if (res.code == 20000) {
                        this.loadData();
                        this.$Message.success({
                            content: "发布成功",
                            duration: 5
                        });
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //打开新闻公告发布编辑页面
            handleAdd(row) {
                if(row){
                    this.getNews(row);
                    this.newdialogVisible = true
                }else{
                    this.newdialogVisible = true
                }
            },
            //删除
            deleteNews(id) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除？",
                    onOk: () => {
                        this.getRequest("/api/newsPlacard/delete?id=" + id).then(res => {
                            if (res.code == 20000) {
                                this.loadData();
                                this.$Message.success({
                                    content: "操作成功",
                                    duration: 5
                                });
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                });
            },

            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            getNews(row){
                this.news = row;
                this.imageUrl = row.themeImg;
            },
            // 转码
            escapeStringHTML(str) {
                str = str.replace(/&lt;/g, '<');
                str = str.replace(/&gt;/g, '>');
                return str;
            },
            onEditorReady(editor) { // 准备编辑器

            },
            onEditorBlur() {
            }, // 失去焦点事件
            onEditorFocus() {
            }, // 获得焦点事件
            onEditorChange() {
            }, // 内容改变事件
            // 转码
            escapeStringHTML(str) {
                str = str.replace(/&lt;/g, '<');
                str = str.replace(/&gt;/g, '>');
                return str;
            },
            handleUp: function () {
                if(this.news.newsContent){
                    this.news.newsContent = this.escapeStringHTML(this.news.newsContent);
                }
                this.postRequest("/api/newsPlacard/save", this.news).then(res => {
                    console.log(res)
                    if (res.code == 20000) {
                        this.$Message.success({
                            content: "保存成功",
                            duration: 5
                        });
                        this.newdialogVisible = false;
                        this.loadData();
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            handleShow: function () {
                this.str = this.escapeStringHTML(this.news.newsContent);
                this.dialogVisible = true;
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.news.themeImg = res;
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill;
            },
        },
        mounted() {
            let content = '';  // 请求后台返回的内容字符串
            this.str = this.escapeStringHTML(content);
        }
    };
</script>
<style>
    .ly-center .ql-editor {
        min-height: 300px;
    }

    .ly-center .ql-editor img {
        max-width: 100%;
        height: auto;
    }
</style>
<style scoped lang="scss">

    .ly-item {
        width: 100%;
        height: auto;
        display: flex;
        margin-bottom: 10px;
        .left {
            width: 100px;
            height: 40px;
            line-height: 40px;
            padding-right: 20px;
            text-align: right;
            span {
                color: red;
            }
        }
        .rihgt {
            flex: 1;
        }
        .ly-tips {
            font-size: 12px;
            color: #ccc;
            padding-left: 5px;
        }
    }

    .ly-btn {
        margin-top: 20px;
    }

    .avatar-uploader .el-upload {
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        img {
            max-width: 360px;
        }
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 360px;
        height: 154px;
        line-height: 154px;
        text-align: center;
        border: 1px dashed #d9d9d9;
    }

    .avatar-uploader-icon:hover {
        border-color: #409EFF;
    }

    /*.avatar {*/
    /*width: 154px;*/
    /*height: 154px;*/
    /*display: block;*/
    /*}*/
</style>

<style>
    .editor {
        line-height: normal !important;
        height: 800px;
    }
    .ql-snow .ql-tooltip[data-mode=link]::before {
        content: "请输入链接地址:";
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: '保存';
        padding-right: 0px;
    }

    .ql-snow .ql-tooltip[data-mode=video]::before {
        content: "请输入视频地址:";
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: '14px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
        content: '10px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
        content: '18px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
        content: '32px';
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: '文本';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        content: '标题1';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        content: '标题2';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        content: '标题3';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        content: '标题4';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
        content: '标题5';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
        content: '标题6';
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
        content: '标准字体';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
        content: '衬线字体';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
        content: '等宽字体';
    }
</style>
